import React, { useEffect, useState } from 'react';
import { Radio, Space, Table, Tag } from 'antd';
import './table.scss'


const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        render: (tags) => (
            <span>
                {tags.map((tag) => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </span>
        ),
    },
    {
        title: 'Action',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">

                <a>Invite {record.name}</a>
                <a onClick={() => { console.log(record, 'record') }}>Delete</a>
            </Space>
        ),
    },
];
const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];

const App = () => {
    const changes = (e) => {
        console.log(e, '跳转')
    }

    const [a, sa] = useState(false)
    const Ha = {
        fontSize: '1.5em',
        textAlign: 'center',
        color: a ? '#BF4F74' : '#eee'
    }
    const [b, sb] = useState({
        a: '1',
        b: '2',
        c: '3'
    })
    function nb() {
        sb({ ...b, a: 'sa' })
    }

    return (
        <div>
            <div className='table-Table'>
                <Table
                    columns={columns}
                    pagination={{
                        position: ['bottomCenter'],
                        pageSize: 10,
                        current: 1,
                        total: 100,
                        showSizeChanger: false,
                        onChange: changes
                    }}
                    dataSource={data}
                />
            </div>

            <h1 style={Ha}>
                Hello World!
            </h1>
            <div>{b.a}</div>
            <div>{b.b}</div>
            <div>{b.c}</div>
            <button onClick={() => sa(!a)}>切换</button>
            <button onClick={() => nb()}>newb</button>
        </div>
    );
};
export default App;